<template>
	<view class="root">
		<navigator
			v-for="(message, index) in messages"
			:key="index"
			:url="`/pages/messages/${message.type}`"
			class="bb-ee fd-row ml-30 mr-30 ai-center pt-30 pb-30"
		>
			<image
				class="width-76 height-76"
				:src="`/static/images/icon-${message.type}Notification.png`"
				mode="aspectFit"
			/>
			<view class="f1 ml-22 mr-22">
				<text class="color-1b1b1b fs-28">{{ message.title }}</text>
				<text class="mt-12 color-999 fs-24">
					{{ message.content || "暂无通知信息" }}
				</text>
			</view>

			<view class="ai-end">
				<text class="color-999 fs-24">{{ message.time || date }}</text>
				<text
					v-if="+message.num"
					class="mt-12 color-fff bgc-ff4e68 fs-22 br-circle pl-10 pr-10"
				>
					{{ message.num }}
				</text>
			</view>
		</navigator>
	</view>
</template>

<script lang="ts">
	import { formatDate } from "@/libs/utils";
	import Vue from "vue";
	import Component from "vue-class-component";

	@Component
	export default class messages extends Vue {
		// component property
		messages: AnyObject[] = [];
		date: string = formatDate("Y-M-D");

		onReady() {
			uni.$on("receiveNotice", this.getData);
		}

		onShow() {
			this.getData();
		}

		getData(payload: string = "") {
			this.request
				.get("/employee/noticeIndex")
				.then(({ data }) => (this.messages = data));
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.bb-ee {
		border-bottom: 1rpx solid #eee;
	}
</style>